<template>
    <view>
        <view class="input-group">
            <view class="input-row">
                <view class="title">原密码</view>
                <m-input type="password" class="m-input input-frame" displayable v-model="oldPwd"
                         placeholder="请输入6到12位原始密码"></m-input>
            </view>
            <view class="input-row">
                <view class="title">新密码</view>
                <m-input type="password" class="input-frame" displayable v-model="newPwd"
                         placeholder="请输入6到12位新密码"></m-input>
            </view>
            <view class="tip">(仅限6-12位数字和字母组合)</view>
            <view class="input-row">
                <view class="title">确定密码</view>
                <m-input type="password" class="input-frame" displayable v-model="newPassword"
                         placeholder="请再次输入6到12位密码"></m-input>
            </view>
            <view class="tip">(仅限6-12位数字和字母组合)</view>
            <view class="btn-row">
                <button type="primary" class="primary loginBtn" @tap="changePwd">确认修改</button>
            </view>


        </view>
    </view>
</template>

<script>
    import UserService from '@/services/user/index';
    import mInput from '@/components/common/m-input/m-input.vue'
    import mIcon from '@/components/common/m-icon/m-icon.vue'
    import mixins from '@/mixins/index';
    import md5 from 'js-md5';
    import {forwardLogin} from '@/utils/page'

    const userService = new UserService();
    //const pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;//8到16位数字与字母组合
    export default {
        components: {
            mInput,
            mIcon
        },
        mixins:[mixins],
        data() {
            return {
                oldPwd: '',
                newPwd: '',
                newPassword: ''
            };
        },
        methods: {
            changePwd() {
                if (this.oldPwd.length < 6 || this.oldPwd.length>12) {
                    uni.showToast({
                        icon: 'none',
                        title: '输入原密码为6到12个数字字母字符'
                    });
                    return;
                }
                if (this.newPwd.length < 6 || this.newPwd.length>12) {
                    uni.showToast({
                        icon: 'none',
                        title: '输入新密码为6到12个数字字母字符'
                    });
                    return;
                }

                if (this.newPassword.length < 6 || this.newPassword.length>12) {
                    uni.showToast({
                        icon: 'none',
                        title: '输入新密码为6到12个数字字母字符'
                    });
                    return;
                }

                if (this.newPwd!=this.newPassword) {
                    uni.showToast({
                        icon: 'none',
                        title: '两次密码不一致'
                    });
                    return;
                }
                const {oldPwd,newPwd} = this;
				const oldPassword = md5(oldPwd);
                const newPassWord = md5(newPwd);
                console.log('modifyPwd')
                userService.modifyPwd({oldPassword,newPassWord}).then((modifyPwd) => {
                    if(modifyPwd.success)
                    {
                        uni.showToast({
                            title: '修改密码成功',
                            duration: 2000
                        });
                        setTimeout(function(){
                            forwardLogin();
                        },1000)
                    }
                });

            }
        }
    };
</script>

<style lang="less" scoped>
    .input-group {
        padding: 0 30upx;
    }
    .input-row {
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 20upx 0;
        font-size: 28upx;
    }
    .tip {
        color: #f1685d;
        font-size: 24upx;
        margin-top: 20upx;
    }
    .input-frame {
        font-size: 24upx;
    }
    .btn-row {
        margin-top: 50upx;
    }
    .title {
        color: #333;
        font-size: 28upx;
        width: 145upx;
    }
</style>
